<script setup>
import {reactive, ref} from "vue";
import {GET, POST, PUT} from "../../api/index.js";
import {notify} from "../../utils/commonScript.js";
import {getFormat} from "../../utils/index.js";

const dialogVisible = ref(false)
const tableData = ref([])
const taskId = ref('')
const start = ref('')
const end = ref('')

const open = (row) => {
  taskId.value = row.id
  start.value = row.createDate.split(' ')[0]
  end.value = row.endDate
  detail()
}

const detail = () => {
  GET('/market/taskRecord/getByTaskId', {
    taskId: taskId.value
  }).then(res => {
    tableData.value = res.data
    dialogVisible.value = true
  })
}
const saveHandle = () => {
  POST('/market/taskRecord', {
    taskId: taskId.value,
    isOver: 1
  }).then(res => {
    notify('打卡成功')
    detail()
  })
}

const isShowTask = (day) => {
  let c = new Date(day).getTime()
  let s = new Date(start.value).getTime()
  let e = new Date(end.value).getTime()

  return c >= s && c <= e
}

const isShow = (day) => {
  return day === getFormat(new Date(), 'YYYY-MM-DD')
}

const isOver = (day) => {
  let flag = false
  for (let i =0; i< tableData.value.length; i++){
    if(day === tableData.value[i].createDate.split(' ')[0]) {
      flag = true
      break
    }
  }
  return flag
}

defineExpose({
  open
})

</script>

<template>
  <el-dialog v-model="dialogVisible" title="打卡" width="800">
    <el-calendar>
      <template #date-cell="{ data }">
        <p style="margin-bottom: 20px;">
          {{ data.day.split('-').slice(2).join('-') }}
        </p>
        <template v-if="isShowTask(data.day)">
          <el-button link v-if="isOver(data.day)" type="success">已完成</el-button>
          <el-button v-else-if="isShow(data.day) && !isOver(data.day)" link type="primary" @click="saveHandle">打卡</el-button>
          <el-button link v-else type="danger">未完成</el-button>
        </template>
      </template>
    </el-calendar>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
